<template>
    <div class="boder">
      <mt-button class='category' type="default" v-for="option in options" :key="option.value" @click="selectType(option.value)">{{option.value}}</mt-button>
    </div>
</template>
<script>
    export default {
        name: "selectType",
      mounted:function(){
          this.getAppCategory();
      },
      data(){
          return {
            options : [],
            id:''
          }
        },
        methods:{
          getAppCategory:function(){
            this.options.push({value:'未分类'})
            var self=this;
            var query=new AV.Query('AppCategory')
            query.find().then(function(result){
              result.forEach(function(date){
                let a={};
                a.label=(date.attributes).appCategory;
                a.value=(date.attributes).appCategory;
                self.options.push(a)
              })
            })
          },
          selectType:function (value) {
            var self=this;
            if(!value){
              this.$messagebox('提示', '请选择要标注的图片类型')
            }else{
              const options={category:value}
              var query=new AV.Query('AppCategory');
              query.equalTo('appCategory',value)
              query.find().then(function(result){
                if(result.length===0){
                  self.id='未分类'
                  self.$router.push({path:'/makeFont/'+self.id})
                }else{
                  self.id=result[0].id
                  self.$router.push({path:'/makeFont/'+self.id})
                }
              })
            }
          }
        }
    }
</script>

<style scoped>
  .boder{
    height: 100%;
  }
  .category{
    height: 50px;
    width: 150px;
    margin-left: 70px;
    margin-top: 30px;
    top: 30px;
  }

</style>
